<page-header></page-header>
<div nz-row [nzGutter]="24" class="pt-lg">
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
        <g2-card
            [title]="'总销售额'"
            total="¥ 126,560"
            contentHeight="44px"
            [action]="action1"
            [footer]="footer1">
            <ng-template #action1>
                <nz-tooltip [nzTitle]="'指标说明'">
                    <i nz-tooltip class="anticon anticon-info-circle-o"></i>
                </nz-tooltip>
            </ng-template>
            <trend flag="up" style="display:block; margin-top:2px;">周同比<span class="pl-sm">12%</span></trend>
            <trend flag="down">日环比<span class="pl-sm">11%</span></trend>
            <ng-template #footer1>
                <p class="text-truncate mb0">日均销售额<span class="ml-sm">￥12,423</span></p>
            </ng-template>
        </g2-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
        <g2-card [title]="'访问量'"
            total="8,848"
            contentHeight="46px"
            [action]="action2"
            [footer]="footer2">
            <ng-template #action2>
                <nz-tooltip [nzTitle]="'指标说明'">
                    <i nz-tooltip class="anticon anticon-info-circle-o"></i>
                </nz-tooltip>
            </ng-template>
            <g2-mini-area
                color="#975FE4"
                height="46"
                [data]="data.visitData"></g2-mini-area>
            <ng-template #footer2>
                <p class="text-truncate mb0">日访问量<span class="ml-sm">1,234</span></p>
            </ng-template>
        </g2-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
        <g2-card [title]="'支付笔数'"
            total="6,560"
            contentHeight="46px"
            [action]="action3"
            [footer]="footer3">
            <ng-template #action3>
                <nz-tooltip [nzTitle]="'指标说明'">
                    <i nz-tooltip class="anticon anticon-info-circle-o"></i>
                </nz-tooltip>
            </ng-template>
            <g2-mini-bar
                height="46"
                [data]="data.visitData"></g2-mini-bar>
            <ng-template #footer3>
                <p class="text-truncate mb0">转化率<span class="ml-sm">60%</span></p>
            </ng-template>
        </g2-card>
    </div>
    <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
        <g2-card [title]="'运营活动效果'"
            total="78%"
            contentHeight="46px"
            [action]="action4"
            [footer]="footer4">
            <ng-template #action4>
                <nz-tooltip [nzTitle]="'指标说明'">
                    <i nz-tooltip class="anticon anticon-info-circle-o"></i>
                </nz-tooltip>
            </ng-template>
            <g2-mini-progress
                height="46"
                percent="78"
                strokeWidth="8"
                target="80"
                color="#13C2C2"></g2-mini-progress>
            <ng-template #footer4>
                <div class="d-flex justify-content-between">
                    <trend flag="up">周同比<span class="pl-sm">12%</span></trend>
                    <trend flag="down">日环比<span class="pl-sm">11%</span></trend>
                </div>
            </ng-template>
        </g2-card>
    </div>
</div>
<nz-card [nzLoading]="loading" [nzBordered]="false" class="ant-card__body-nopadding sales-card">
    <nz-tabset [nzTabBarExtraContent]="extraTemplate">
        <nz-tab nzTitle="销售额">
            <div nz-row>
                <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="16">
                    <div class="bar">
                        <g2-bar
                            height="295"
                            [title]="'销售额趋势'"
                            [data]="data.salesData"></g2-bar>
                    </div>
                </div>
                <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8">
                    <div class="rank-list">
                        <h4 class="rank-title">门店销售额排名</h4>
                        <ul>
                            <li *ngFor="let i of rankingListData; let idx = index">
                                <div>
                                    <span class="icon" [ngClass]="{'active': idx < 3}">{{idx+1}}</span>
                                    {{i.title}}
                                </div>
                                <span>{{i.total | number: '3.0'}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nz-tab>
        <nz-tab nzTitle="访问量">
            <div nz-row>
                <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="16">
                    <div class="bar">
                        <g2-bar
                            height="295"
                            [title]="'访问量趋势'"
                            [data]="data.salesData"></g2-bar>
                    </div>
                </div>
                <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8">
                    <div class="rank-list">
                        <h4 class="rank-title">门店访问量排名</h4>
                        <ul>
                            <li *ngFor="let i of rankingListData; let idx = index">
                                <div>
                                    <span class="icon" [ngClass]="{'active': idx < 3}">{{idx+1}}</span>
                                    {{i.title}}
                                </div>
                                <span>{{i.total | number: '3.0'}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nz-tab>
        <ng-template #extraTemplate>
            <div class="sales-extra-wrap">
                <div class="sales-extra">
                    <a (click)="setDate('today')">今日</a>
                    <a (click)="setDate('week')">本周</a>
                    <a (click)="setDate('month')">本月</a>
                    <a (click)="setDate('year')">全年</a>
                </div>
            </div>
        </ng-template>
    </nz-tabset>
</nz-card>
<div nz-row [nzGutter]="24">
    <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="12">
        <nz-card [nzLoading]="loading" [nzBordered]="false" nzTitle="线上热门搜索" [nzExtra]="extraOp">
            <ng-template #extraOp>
                <nz-dropdown>
                    <i class="anticon anticon-ellipsis" nz-dropdown></i>
                    <ul nz-menu>
                        <li nz-menu-item>操作一</li>
                        <li nz-menu-item>操作二</li>
                    </ul>
                </nz-dropdown>
            </ng-template>
            <div nz-row [nzGutter]="64">
                <div nz-col nzXs="24" nzSm="12" class="mb-md">
                    <number-info total="12,321" subTotal="17.1" status="up" [subTitle]="subTitle">
                        <ng-template #subTitle>
                            搜索用户数
                            <nz-tooltip [nzTitle]="'指标文案'">
                                <i nz-tooltip class="anticon anticon-info-circle-o ml-sm"></i>
                            </nz-tooltip>
                        </ng-template>
                    </number-info>
                    <g2-mini-area [line]="true" height="45" [data]="data.visitData2"></g2-mini-area>
                </div>
                <div nz-col nzXs="24" nzSm="12" class="mb-md">
                    <number-info subTitle="人均搜索次数" total="2.7" subTotal="26.2" status="down"></number-info>
                    <g2-mini-area [line]="true" height="45" [data]="data.visitData2"></g2-mini-area>
                </div>
            </div>
            <simple-table [data]="data.searchData" [columns]="searchColumn" size="small" ps="5" [toTopInChange]="false">
                <ng-template st-row="range" let-i>
                    <trend [flag]="i.status === 1 ? 'down' : 'up'">
                        <span>{{i.range}}%</span>
                    </trend>
                </ng-template>
            </simple-table>
        </nz-card>
    </div>
    <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="12">
        <nz-card [nzLoading]="loading" [nzBordered]="false" nzTitle="销售额类别占比" [nzBodyStyle]="{'padding.px': 24}" [nzExtra]="extra" class="sales-card" style="min-height: 482px;">
            <ng-template #extra>
                <div class="sales-card-extra">
                    <nz-dropdown>
                        <i class="anticon anticon-icon-group" nz-dropdown nzType="ellipsis"></i>
                        <ul nz-menu>
                            <li nz-menu-item>操作一</li>
                            <li nz-menu-item>操作二</li>
                        </ul>
                    </nz-dropdown>
                    <div class="sales-type-radio">
                        <nz-radio-group [(ngModel)]="salesType" (ngModelChange)="changeSaleType()">
                            <label nz-radio-button [nzValue]="'all'"><span>全部渠道</span></label>
                            <label nz-radio-button [nzValue]="'online'"><span>线上</span></label>
                            <label nz-radio-button [nzValue]="'offline'"><span>门店</span></label>
                        </nz-radio-group>
                    </div>
                </div>
            </ng-template>
            <h4 class="margin:8px 0 32px 0;">销售额</h4>
            <g2-pie
                [hasLegend]="true"
                subTitle="销售额"
                [height]="248"
                [lineWidth]="4"
                [total]="salesTotal"
                [data]="salesPieData"
                [valueFormat]="handlePieValueFormat">
            </g2-pie>
        </nz-card>
    </div>
</div>
<nz-card [nzLoading]="loading" [nzBordered]="false" [nzBodyStyle]="{'padding': '0 0 32px'}" class="offline-card mt-lg">
    <nz-tabset [(nzSelectedIndex)]="_activeTab" (nzSelectChange)="_tabChange($event)">
        <nz-tab *ngFor="let tab of data.offlineData; let i = index;" [nzTitle]="nzTabHeading">
            <ng-template #nzTabHeading>
                <div nz-row [nzGutter]="8" style="width: 138px; margin: 8px 0;">
                    <div nz-col [nzSpan]="12">
                        <number-info
                            [title]="tab.name"
                            subTitle="转化率"
                            gap="2"
                            [total]="(tab.cvr * 100) + '%'"
                            [theme]="i !== _activeTab && 'light'"></number-info>
                    </div>
                    <div nz-col [nzSpan]="12" style="padding-top: 36px;">
                        <g2-pie
                            [animate]="false"
                            [color]="i !== _activeTab && '#BDE4FF'"
                            [inner]="0.55"
                            [tooltip]="false"
                            [padding]="[0, 0, 0, 0]"
                            [percent]="tab.cvr * 100"
                            [height]="64">
                        </g2-pie>
                    </div>
                </div>
            </ng-template>
            <div class="px-lg">
                <g2-timeline [data]="tab.chart"
                            [titleMap]="{ y1: '客流量', y2: '支付笔数' }"></g2-timeline>
            </div>
        </nz-tab>
    </nz-tabset>
</nz-card>
